<template>
  <div class="cs-page-container">
    <el-card
      class="box-card"
      style="margin-bottom: 20px;"
    >
      <div
        slot="header"
        class="clearfix"
      >
        <span>弹窗公告</span>
      </div>
      <el-form
        ref="dataForm2"
        :rules="rules"
        :model="alertNotice"
        label-position="left"
        label-width="100px"
        style="margin-left:50px;"
      >
        <el-form-item
          label="公告标题:"
          prop="title"
        >
          <el-input v-model.trim="alertNotice.title" maxlength="60" />
        </el-form-item>
        <el-form-item
          label="链接:"
          prop="url"
        >
          <el-input v-model.trim="alertNotice.url" maxlength="800" />
        </el-form-item>
        <el-form-item
          label="开关"
          prop="open"
        >
          <el-switch v-model="alertNotice.open" />
        </el-form-item>
        <el-button
          class="filter-item"
          type="primary"
          @click="handleAlertNotice"
        >保存</el-button>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import {
  getNoticeList,
  updateNoticeList
} from '@/api/customSetting'
import Upload from '@/components/Upload/SingleImage'

export default {
  name: 'PopNoticeSetting',
  // eslint-disable-next-line vue/no-unused-components
  components: { Upload },
  props: {
    appType: {
        type: Number,
        required: true,
        defult: 0
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
      listQuery: {},
      alertNotice: {
        appType: 0,
        url: null,
        title: null,
        id: undefined,
        open: false,
        cover: null,
        type: 1
      },
      temp: {
        url: null,
        title: null,
        id: undefined,
        open: false,
        cover: null,
        type: 0
      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑',
        create: '新建'
      },
      dialogPvVisible: false,
      total: 0,
      rules: {
        title: [{ required: true, message: '必选项', trigger: 'blur' }],
        cover: [{ required: true, message: '必选项', trigger: 'blur' }],
        url: [{ required: true, message: '必选项', trigger: 'blur' }],
        open: [{ required: true, message: '必选项', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.doSearch()
  },
  methods: {
    doSearch() {
      this.listLoading = true
      getNoticeList(Object.assign({}, this.listQuery, { appType: this.appType })).then(response => {
        this.list = response.data.bannerNoticeList
        this.alertNotice = response.data.alertNotice || {
            appType: this.appType,
            url: null,
            title: null,
            id: undefined,
            open: false,
            cover: null,
            type: 1
        }
        this.total =
          (response.data.bannerNoticeList &&
            response.data.bannerNoticeList.length) ||
          0
        this.listLoading = false
      })
    },
    handleAlertNotice() {
      this.$refs['dataForm2'].validate(valid => {
        valid &&
        updateNoticeList(this.alertNotice).then(() => {
          this.doSearch()
          this.$notify({
            title: '成功',
            message: '操作成功',
            type: 'success',
            duration: 2000
          })
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .img-wrap {
    width: 100px;
    height: 100px;
    cursor: pointer;
    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
</style>
